<template>
  <div class="effectiveTaskComp mb16">
    <h3 class="withLine title14">
      {{ $t('effectiveTask') }}
      <span class="title3Icon" v-show="false">
        <a-icon type="setting" />
      </span>
    </h3>
    <div class="rightCompMainContBox">
      <full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>
      <ul>
        <li class="todo-item" v-for="item in lists" :key="item.id">
          <a @click="goto(item)">
            <span class="taskName">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.name"></table-ellipsis>
            </span>
            <span class="syday">{{ item.surplus }}</span>
          </a>
        </li>
        <li class="todo-item" v-if="lists.length === 0 && !loading">{{ $t('noData') }}</li>
      </ul>
    </div>
    <div class="paginationWrap" v-if="totalCount/pageInfo.pageSize > 1">
      <a-pagination
        simple
        :current="pageInfo.pageNo"
        :total="totalCount"
        :pageSize="pageInfo.pageSize"
        @change="changePageSize"
      />
    </div>
  </div>
</template>
<script>
import taskApi from '@/api/modules/task'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import moment from 'moment'
import { taskPerms } from '@/config/permission/index'
export default {
  components: {
    FullParentDomWithDask,
    TableEllipsis
  },
  data () {
    return {
      taskPerms,
      lists: [],
      loading: false,
      pageInfo: {
        pageSize: 10,
        pageNo: 1
      },
      totalCount: 20
    }
  },
  created () {
    this.$hasPermission([taskPerms.view]) && this.loadData()
  },
  methods: {
    loadData () {
      // 只查进行中的任务
      this.lists = []
      this.loading = true
      taskApi.getTaskPageData({ status: 12, ...this.pageInfo, order: 'endTime,ASC' }).then(res => {
        this.lists = res.data.map(item => {
          return {
            id: item.id,
            name: item.name,
            status: item.status,
            surplus: this.getSurplusDays(item.endTime)
          }
        })
        this.totalCount = res.totalCount
      }).finally(() => {
        this.loading = false
      })
    },
    changePageSize (page) {
      this.pageInfo.pageNo = page
      this.loadData()
    },
    // 获取剩余天数
    getSurplusDays (endTime) {
      return this.$t('surplusDay').replace('__CONTENT__', Math.ceil(moment(endTime).diff(moment(), 'hours') / 24))
    },
    goto (item) {
      this.$router.push({
        path: '/campaign',
        query: {
          action: 'detail',
          id: item.id,
          type: item.type,
          name: item.name
        }
      })
    }

  }
}
</script>
<style scoped lang="less">
.effectiveTaskComp {
  .rightCompMainContBox {
    position: relative;
    min-height: 100px;
  }
  .todo-item {
    height: 32px;
    line-height: 32px;
    > a {
      display: block;
      display: flex;
    }
    .syday {
      font-size: 12px;
      color: #cdcdcd;
      flex: none;
    }
    .taskName {
      margin-left: 8px;
      flex: 1 0 0;
      margin-right: 40px;
    }
  }
  .paginationWrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}
</style>
